<template>
  <div class="emp-box">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/loginRedirect' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>通用审批</el-breadcrumb-item>
      <el-breadcrumb-item>请假申请</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="padding: 50px 150px 30px 150px">
      <el-form ref="form" :model="leaveForm" label-width="80px">
        <el-form-item label="请假原因">
          <el-input v-model="leaveForm.applyTitle" placeholder="请输入请假标题"></el-input>
        </el-form-item>
        <el-form-item label="请假时间">
          <div style="display: inline-block; width: 800px; line-heigth: 30px">
            <div style="display: inline-block">
              <el-date-picker
                type="datetime"
                v-model="leaveForm.beginDate"
                placeholder="开始日期"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
            <div style="display: inline-block; margin-left: 15px; padding-right: 30px">-</div>
            <div style="display: inline-block; margin-left: -15px">
              <el-date-picker
                type="datetime"
                v-model="leaveForm.endDate"
                placeholder="结束日期"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="请假类型">
          <el-radio-group v-model="leaveForm.typeId">
            <el-radio v-for="(item,index) in typeData" :label="item.typeId" :key="index">{{item.applyType}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="补充说明">
          <el-input type="textarea" :rows="10" placeholder="请输入详细内容..." v-model="leaveForm.applyDetail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleApply()">提 交 申 请</el-button>
          <el-button type="warning" @click="resetForm()">撤 销 重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeData:[],
      leaveForm:{
        applyTitle:"",
        beginDate:"",
        endDate:"",
        typeId:"",
        applyDetail:""
      }   
    };
  },
  created() {
    this.getLeaveType();
  },
  methods: {
    getLeaveType(){
      this.$http.get("/approval/getLeaveType").then((res)=>{
        if(res.code === 200){
          this.typeData = res.data;
        }
      })
    },
    //提交申请
    handleApply(){
      let st = this.leaveForm.applyTitle === "" || this.leaveForm.beginDate === "";
      let st1 = this.leaveForm.endDate === "" || this.leaveForm.typeId === "" || this.leaveForm.applyDetail === "";
      if(st || st1){
        return this.$message.warning("有数据为空,请全部填选!!!");
      }
      this.$http.post("/approval/leaveApply",this.leaveForm).then((res)=>{
        if(res.data){
          this.$message.success("申请成功!!!");
          this.leaveForm = {};
        }else{
          this.$message.error("申请失败!!!");
        }
      }).catch((err)=>{
        this.$message.error("申请失败!!!");
      });     
    },
    //重置
    resetForm(){
      this.leaveForm = {};
    }
  },
};
</script>

<style scoped>
.emp-box .search-box {
  width: 30%;
  margin-top: 20px;
}
</style>
